import React from 'react';
import {StatisticCard} from '@ant-design/pro-card';
import {SmileTwoTone, SettingTwoTone,ShoppingTwoTone,
  AccountBookTwoTone,MailTwoTone, CalendarTwoTone, TagsTwoTone,RedEnvelopeTwoTone  } from "@ant-design/icons";

const HomePage = () => {
  const { Statistic } = StatisticCard;
  const title = ['销售额']
  return (
      <div style={{ display: 'flex',justifyContent: 'space-between'}} >
        <div style={{ width: '24%'}}>
          <StatisticCard
            title={title}
            extra={
              <div
                style={{
                  padding:'3px 10px',
                  background:'#f6ffed',
                  border: '1px solid #b7eb8f',
                  color: '#52c41a',
                  fontSize:'12px'
                }}
            >昨日</div>}
            statistic={{
              value: 0.02,
            }}
            footer={
              <>
                <Statistic value={0.02} title="本月销售额" suffix="元" layout="horizontal" />
              </>
            }

          >
            <div style={{display: 'flex', marginBottom:'15px'}}>
              <Statistic title="日环比" value="7.60%" trend="up"/>
              <Statistic title="周环比" value="7.60%" trend="down"  style={{marginTop: 0 , marginLeft:'10px'}}/>
            </div>

          </StatisticCard>
          <div style={{marginTop:'10px', display: 'flex', textAlign: 'center'}}>
              <StatisticCard style={{width:'48%'}}
              >
                <a href="">
                <div className="icons-list">
                  <SmileTwoTone twoToneColor="#69c0ff" style={{fontSize:'30px'}} />
                </div>
                <div style={{fontSize:'14px', marginTop:'10px', color:'#515a6e'}}>用户管理</div>
                </a>
              </StatisticCard>
              <StatisticCard style={{marginLeft:'10px', width:'48%'}}  >
                <a href="">
                  <div className="icons-list">
                    <SettingTwoTone twoToneColor="#95de64" style={{fontSize:'30px'}} />
                  </div>
                  <div style={{fontSize:'14px', marginTop:'10px',color:'#515a6e'}}>系统设置</div>
                </a>
              </StatisticCard>
          </div>
        </div>
        <div style={{ width: '24%'}}>
          <StatisticCard
            title={title}
            extra={
              <div
                style={{
                  padding:'3px 10px',
                  background:'#f6ffed',
                  border: '1px solid #b7eb8f',
                  color: '#52c41a',
                  fontSize:'12px'
                }}
              >昨日</div>}
            statistic={{
              value: 0.02,
            }}
            footer={
              <>
                <Statistic value={0.02} title="本月销售额" suffix="元" layout="horizontal" />
              </>
            }

          >
            <div style={{display: 'flex', marginBottom:'15px'}}>
              <Statistic title="日环比" value="7.60%" trend="up"/>
              <Statistic title="周环比" value="7.60%" trend="down"  style={{marginTop: 0 , marginLeft:'10px'}}/>
            </div>

          </StatisticCard>
          <div style={{marginTop:'10px', display: 'flex', textAlign: 'center'}}>
            <StatisticCard style={{width:'48%'}}
            >
              <a href="">
                <div className="icons-list">
                  <ShoppingTwoTone twoToneColor="#ff9c6e" style={{fontSize:'30px'}} />
                </div>
                <div style={{fontSize:'14px', marginTop:'10px', color:'#515a6e'}}>商品</div>
              </a>
            </StatisticCard>
            <StatisticCard style={{marginLeft:'10px', width:'48%'}}  >
              <a href="">
                <div className="icons-list">
                  <AccountBookTwoTone twoToneColor="#b37feb" style={{fontSize:'30px'}} />
                </div>
                <div style={{fontSize:'14px', marginTop:'10px',color:'#515a6e'}}>订单管理</div>
              </a>
            </StatisticCard>
          </div>
        </div>
        <div style={{ width: '24%'}}>
          <StatisticCard
            title={title}
            extra={
              <div
                style={{
                  padding:'3px 10px',
                  background:'#f6ffed',
                  border: '1px solid #b7eb8f',
                  color: '#52c41a',
                  fontSize:'12px'
                }}
              >昨日</div>}
            statistic={{
              value: 0.02,
            }}
            footer={
              <>
                <Statistic value={0.02} title="本月销售额" suffix="元" layout="horizontal" />
              </>
            }

          >
            <div style={{display: 'flex', marginBottom:'15px'}}>
              <Statistic title="日环比" value="7.60%" trend="up"/>
              <Statistic title="周环比" value="7.60%" trend="down"  style={{marginTop: 0 , marginLeft:'10px'}}/>
            </div>

          </StatisticCard>
          <div style={{marginTop:'10px', display: 'flex', textAlign: 'center'}}>
            <StatisticCard style={{width:'48%'}}
            >
              <a href="">
                <div className="icons-list">
                  <MailTwoTone twoToneColor="#ffd666" style={{fontSize:'30px'}} />
                </div>
                <div style={{fontSize:'14px', marginTop:'10px', color:'#515a6e'}}>短信配置</div>
              </a>
            </StatisticCard>
            <StatisticCard style={{marginLeft:'10px', width:'48%'}}  >
              <a href="">
                <div className="icons-list">
                  <CalendarTwoTone twoToneColor="#5cdbd3" style={{fontSize:'30px'}} />
                </div>
                <div style={{fontSize:'14px', marginTop:'10px',color:'#515a6e'}}>文章管理</div>
              </a>
            </StatisticCard>
          </div>
        </div>
        <div style={{ width: '24%'}}>
          <StatisticCard
            title={title}
            extra={
              <div
                style={{
                  padding:'3px 10px',
                  background:'#f6ffed',
                  border: '1px solid #b7eb8f',
                  color: '#52c41a',
                  fontSize:'12px'
                }}
              >昨日</div>}
            statistic={{
              value: 0.02,
            }}
            footer={
              <>
                <Statistic value={0.02} title="本月销售额" suffix="元" layout="horizontal" />
              </>
            }

          >
            <div style={{display: 'flex', marginBottom:'15px'}}>
              <Statistic title="日环比" value="7.60%" trend="up"/>
              <Statistic title="周环比" value="7.60%" trend="down"  style={{marginTop: 0 , marginLeft:'10px'}}/>
            </div>

          </StatisticCard>
          <div style={{marginTop:'10px', display: 'flex', textAlign: 'center'}}>
            <StatisticCard style={{width:'48%'}}
            >
              <a href="">
                <div className="icons-list">
                  <TagsTwoTone twoToneColor="#ff85c0" style={{fontSize:'30px'}} />
                </div>
                <div style={{fontSize:'14px', marginTop:'10px', color:'#515a6e'}}>分销管理</div>
              </a>
            </StatisticCard>
            <StatisticCard style={{marginLeft:'10px', width:'48%'}}  >
              <a href="">
                <div className="icons-list">
                  <RedEnvelopeTwoTone twoToneColor="#ffc069" style={{fontSize:'30px'}} />
                </div>
                <div style={{fontSize:'14px', marginTop:'10px',color:'#515a6e'}}>优惠券</div>
              </a>
            </StatisticCard>
          </div>
        </div>
    </div>
  );
};

export default HomePage;
